document.addEventListener('DOMContentLoaded', function() {
    // 获取所有留言项和回复表单
    const messageItems = document.querySelectorAll('.message-item');
    const replyForm = document.querySelector('.reply-form');
    let currentReplyTo = null; // 记录当前回复的目标留言
    
    // 处理点赞功能
    function handleLike(likeBtn) {
        const likeCount = likeBtn.querySelector('span');
        const currentLikes = parseInt(likeCount.textContent);
        
        if (likeBtn.classList.contains('liked')) {
            likeCount.textContent = currentLikes - 1;
            likeBtn.classList.remove('liked');
            likeBtn.style.color = '#6c757d';
        } else {
            likeCount.textContent = currentLikes + 1;
            likeBtn.classList.add('liked');
            likeBtn.style.color = '#dc3545';
        }

        // TODO: 发送点赞请求到服务器
        // saveToServer('like', messageId, isLiked);
    }

    // 处理回复功能
    function handleReply(element, replyToName) {
        // 如果点击的是当前正在回复的元素，则隐藏回复表单
        if (currentReplyTo === element) {
            replyForm.style.display = 'none';
            currentReplyTo = null;
            return;
        }

        // 显示回复表单并移动到目标元素下方
        currentReplyTo = element;
        element.after(replyForm);
        replyForm.style.display = 'block';
        
        // 设置回复对象的名字
        const textarea = replyForm.querySelector('textarea');
        textarea.setAttribute('data-reply-to', replyToName);
        textarea.placeholder = `回复 ${replyToName}...`;
        textarea.focus();
    }

    // 处理回复表单的提交
    const form = replyForm.querySelector('form');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const content = this.querySelector('textarea').value;
        const replyToName = this.querySelector('textarea').getAttribute('data-reply-to');

        if (content.trim() && currentReplyTo) {
            // 创建新的回复
            const reply = document.createElement('div');
            reply.className = 'message-reply';
            reply.innerHTML = `
                <div class="reply-info">
                    <img src="assets/images/avatar/default.jpg" alt="用户头像" class="reply-avatar">
                    <div class="reply-user-info">
                        <h4>Sara</h4>
                        <span class="reply-to">回复 <span class="reply-name">${replyToName}</span></span>
                        <span class="time">刚刚</span>
                    </div>
                </div>
                <div class="reply-content">
                    <p>${content}</p>
                </div>
                <div class="reply-actions">
                    <button class="reply-btn">
                        <i class="fas fa-reply"></i> 回复
                    </button>
                </div>
            `;

            // 插入回复
            const container = currentReplyTo.closest('.message-item');
            container.appendChild(reply);

            // 为新回复添加回复功能
            const newReplyBtn = reply.querySelector('.reply-btn');
            newReplyBtn.addEventListener('click', () => handleReply(reply, 'Sara'));

            // 重置表单和状态
            this.reset();
            replyForm.style.display = 'none';
            currentReplyTo = null;
        }
    });

    // 处理取消回复
    const cancelBtn = replyForm.querySelector('.cancel-reply');
    cancelBtn.addEventListener('click', function() {
        replyForm.style.display = 'none';
        currentReplyTo = null;
        form.reset();
    });

    // 为每个留言项添加事件监听
    messageItems.forEach(item => {
        const likeBtn = item.querySelector('.like-btn');
        const replyBtn = item.querySelector('.reply-btn');
        const userName = item.querySelector('.user-info h3').textContent;

        likeBtn.addEventListener('click', () => handleLike(likeBtn));
        replyBtn.addEventListener('click', () => handleReply(item, userName));
    });

    // 处理主留言表单提交
    const mainForm = document.getElementById('messageForm');
    if (mainForm) {
        mainForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const nickname = this.querySelector('#name').value;
            const email = this.querySelector('#email').value;
            const content = this.querySelector('#content').value;

            if (content.trim() && nickname.trim() && email.trim()) {
                // 创建新的留言
                const newMessage = document.createElement('div');
                newMessage.className = 'message-item';
                newMessage.innerHTML = `
                    <div class="message-info">
                        <img src="assets/images/avatar/default.jpg" alt="用户头像" class="avatar">
                        <div class="user-info">
                            <h3>${nickname}</h3>
                            <span class="time">刚刚</span>
                        </div>
                    </div>
                    <div class="message-content">
                        <p>${content}</p>
                    </div>
                    <div class="message-actions">
                        <button class="reply-btn">
                            <i class="fas fa-reply"></i> 回复
                        </button>
                        <button class="like-btn">
                            <i class="fas fa-heart"></i> 
                            <span>0</span>
                        </button>
                    </div>
                `;

                // 插入新留言到列表开头
                const messageList = document.querySelector('.message-items');
                messageList.insertBefore(newMessage, messageList.firstChild);

                // 为新留言添加事件监听
                const newReplyBtn = newMessage.querySelector('.reply-btn');
                const newLikeBtn = newMessage.querySelector('.like-btn');
                newReplyBtn.addEventListener('click', () => handleReply(newMessage, nickname));
                newLikeBtn.addEventListener('click', () => handleLike(newLikeBtn));

                // 清空表单
                this.reset();

                // TODO: 发送留言数据到服务器
                // saveToServer('message', null, { nickname, email, content });
            }
        });
    }
}); 